<template>
	<view class="wp">
		<view class="hb_input flex_between">
			<image src="https://img.jinghushi.com/images/9/2024/12/f7i75VthW7NVtVpiHR7e5565hiW6hv.png" mode="widthFix"></image>
			<view class="hb">红包个数</view>
			<input type="number" v-model="num" placeholder="填写红包个数" @input="changeNum">
			<view class="hb">个</view>
		</view>
		<view class="hb_input flex_between">
			<image src="https://img.jinghushi.com/images/9/2024/12/fvTuKvPPpKMBUnSc4KPq29UsUkppcj.png" mode="widthFix"></image>
			<view class="hb">总金额</view>
			<input type="digit" placeholder="¥0.00" v-model="amount" @input="changeprice">
		</view>	
		<view class="hb_input flex_between">
			<input type="text" @input="changeTitle" style="text-align: left;" v-model="title" placeholder="恭喜发财, 大吉大利">
		</view>	
		<view class="hb_input">
			<radio-group @change="radioChange">
				<label class="flex_align_center hb_type" v-for="(item, index) in items" :key="item.value">
					<view>
						<radio :value="item.value" :checked="item.value == type" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view class="hb_price">￥{{amount}}</view>
		<view class="hb_btn" @click="submit">塞钱进红包</view>
		<view class="hb_record" @click="$navTo('/pages/user/hbrecord')">发出的红包</view>
		<!-- 提示信息弹窗 -->
		<!-- <uni-popup ref="message" type="message">
			<uni-popup-message type="error" :message="messageText" :duration="3000"></uni-popup-message>
		</uni-popup> -->
		<!-- 提现密码 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" before-close="true" confirmText="确定" title="提现密码" content="" @confirm="realSubmit" @close="closeDia">
				<!-- #ifdef MP-WEIXIN -->
				<input type="password" v-model="password" class="with_password" placeholder="请输入提现密码">
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<input type="text" password v-model="password" class="with_password" placeholder="请输入提现密码">
				<!-- #endif -->
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: '',
				type: 2,
				num: '',
				title: '',
				items: [{
					value: 1,
					name: '固定金额红包',
				},
				{
					value: 2,
					name: '随机红包'
				}],
				messageText: '',
				password:''
			}
		},
		methods: {
			changeprice(e){
				let value = e.detail.value;
				if (value.indexOf(".") < 0 && value != "") {
				    value = parseFloat(value);
				} else if (value.indexOf(".") == 0) {
					//'首位小数点情况'
				    value = value.replace(/[^$#$]/g, "0.");
				    value = value.replace(/\.{2,}/g, ".");
				} else if (!(/^(\d?)+(\.\d{0,2})?$/.test(value))) {
				    //去掉最后一位
				    value = value.substring(0, value.length - 1)
				}
				this.$nextTick(function() {
					this.amount = value;
				})
			},
			changeNum(e){
				let num = e.detail.value;
			},
			changeTitle(e){
				let value = e.detail.value;
				if(value.length>25){
					value = value.slice(0,25);
				}
				this.$nextTick(function() {
					this.title = value;
				})
			},
			submit(){
				if(this.amount==''||this.amount<=0) return this.$api.msg('请填写红包金额')
				// if(this.amount>1000) return this.$api.msg('红包总金额不可超过1000')
				if(this.num=='') return this.$api.msg('请填写红包个数')
				if(this.num>1000) return this.$api.msg('红包个数不可超过1000')
				if((this.amount / this.num)< 0.01) return this.$api.msg('单个红包不可低于0.01')
				this.$refs.inputDialog.open();
			},
			realSubmit(){
				if(this.password==''){
					return this.$api.msg('请输入提现密码');
				}
				this.$axios('redpacket/create','POST','member',{
					amount: this.amount,
					num: this.num,
					title: this.title==''?'恭喜发财，大吉大利':this.title,
					type: this.type,
					paypwd: this.password
				}).then(res=>{
					if(res.data.code == 200){
						this.$api.msg(res.data.data)
						this.$refs.inputDialog.close();
						this.password = '';
						setTimeout(()=>{
							this.$navTo('/pages/user/hbrecord?isshare=1');
						},1000)
					}
				})
			},
			radioChange(e){
				console.log(e)
				this.type = e.detail.value;
			},
			closeDia(){
				this.$refs.inputDialog.close();
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #ededed;
}
.wp{
	padding: 20rpx;
}
.hb_input{
	background: #fff;
	padding: 34rpx 30rpx;
	border-radius: 10rpx;
	margin-bottom: 30rpx;
	font-size: 30rpx;
	image{
		width: 46rpx;
		margin-right: 10rpx;
	}
	input{
		flex: 1;
		text-align: right;
		padding: 0 10rpx;
	}
}
.hb_type{
	line-height: 80rpx;
}
.hb_price{
	text-align: center;
	font-size: 60rpx;
	font-weight: bold;
	margin-top: 120rpx;
}
.hb_btn{
	background: #ed6b51;
	color: #fff;
	border-radius: 10rpx;
	width: 280rpx;
	line-height: 90rpx;
	text-align: center;
	margin: 40rpx auto;
	font-size: 30rpx;
}
.hb_record{
	position: fixed;
	bottom: 100rpx;
	font-size: 26rpx;
	color: #666;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
}
</style>
